<template>
  <div>
    <my-simple-page
      :tableTitle="tableTitle"
      :search-fields="searchFields"
      :columns="columns"
      :edit-fields="editFields"
      :search-url="searchUrl"
      :save-url="saveUrl"
      :delete-url="deleteUrl"
      :data-append="{type: 1}"
    >
      <template slot-scope="scope">
        <span v-permission="'BUTTON'" v-if="!scope.row.children">
          <my-divider direction="vertical"></my-divider>
          <my-button type="text" @click="setButton(scope.row)">按钮</my-button>
        </span>
      </template>
    </my-simple-page>
    <my-drawer
      :footer="false"
      :visible.sync="drawerVisible"
      :title="drawerTitle"
      direction="rtl"
      :before-close="handleClose">
      <my-mini-form
        v-permissions-all="['CREATE','UPDATE']"
        v-if="drawerVisible"
        :formFields="btnFields"
        ref="btnFrom"
        :data="btn"
        :save-url="saveUrl"
        @reset="btnReset"
        @save="btnSave"></my-mini-form>
      <my-divider>
        <span style="color: #409EFF">按钮列表</span>
      </my-divider>
      <my-table
        ref="btnTable"
        size="mini"
        :fixedLeft="1"
        height="65vh"
        :search-url="btnSearchUrl"
        :search-param="btnSearchParam"
        :columns="btnColumns">
        <el-table-column v-permissions="['UPDATE','DELETE']" fixed="right" width="100" align="center">
          <template slot="header">
            actions
          </template>
          <template slot-scope="scope">
            <el-button v-permission="'UPDATE'" type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <my-divider v-permissions-all="['UPDATE','DELETE']" direction="vertical"></my-divider>
            <my-popconfirm-delete v-permission="'DELETE'" @confirm="handleDelete(scope.row.id)">
              <el-button type="text" size="small">删除</el-button>
            </my-popconfirm-delete>
          </template>
        </el-table-column>
      </my-table >
    </my-drawer>
  </div>
</template>

<script>
  export default {
    name: "menu-index",
    data(){
      return{
        searchFields: [
          {
            type: 'input',
            label: '名称',
            prop: 'name'
          },{
            type: 'input',
            label: '路径',
            prop: 'url'
          }
        ],
        tableTitle: '菜单列表',
        columns: [
          {label:'名称',prop: 'name'},
          {label:'路径',prop: 'url'},
          {label:'排序',prop: 'menuOrder'},
          {label:'图标',prop: 'icon'},
          {label:'说明',prop: 'menuDesc'}],
        editFields: [
          {
            type: 'input',
            label: '名称',
            prop: 'name',
            rules:{ required: true, message: '名称不能为空', trigger: 'blur' }
          },
          {
            type: 'input',
            label: '路径',
            prop: 'url',
            rules:{ required: true, message: '路径不能为空', trigger: 'blur' }
          },
          {
            type: 'input',
            label: '组件地址',
            prop: 'component',
            max: '100',
            rules:{ required: true, message: '组件地址不能为空', trigger: 'blur' }
          },
          {
            type: 'select',
            label: '上级菜单',
            prop: 'parent',
            url: '/api/sys-config/menu/getMenuOption'
          },
          {
            type: 'radio',
            label: '是否缓存',
            prop: 'keepAlive',
            dict: 'COMMON_BOOLEAN_DICT',
            rules:{ required: true, message: '缓存不能为空', trigger: 'change' }
          },
          {
            type: 'radio',
            label: '是否显示',
            prop: 'isShow',
            dict: 'COMMON_BOOLEAN_DICT',
            rules:{ required: true, message: '显示不能为空', trigger: 'change' }
          },
          {
            type: 'number',
            label: '排序',
            prop: 'menuOrder'
          },
          {
            type: 'input',
            label: 'icon',
            prop: 'icon'
          },
          {
            type: 'textarea',
            label: '说明',
            prop: 'menuDesc'
          }
        ],
        searchUrl: '/api/sys-config/menu/getMenuList',
        saveUrl: '/api/sys-config/menu/saveMenu',
        deleteUrl: '/api/sys-config/menu/deleteMenu',
        drawerVisible: false,
        drawerTitle: '菜单按钮',
        btnFields: [
          {
            type: 'input',
            label: '名称',
            prop: 'name',
            rules:{ required: true, message: '名称不能为空', trigger: 'blur' }
          },{
            type: 'input',
            label: '编码',
            prop: 'code',
            rules:{ required: true, message: '编码不能为空', trigger: 'blur' }
          }
        ],
        btnSearchUrl: '/api/sys-config/menu/getMenuButtonList',
        btnSearchParam: {},
        btnColumns: [
          {label:'名称',prop: 'name'},
          {label:'权限编码',prop: 'code'}
        ],
        btnData: [
          {
            name: '新增',
            code: 'CREATE'
          },{
            name: '编辑',
            code: 'UPDATE'
          }
        ],
        btn: {}
      }
    },
    methods:{
      /** 关闭按钮配置弹窗 **/
      handleClose(){
        this.drawerVisible = false
      },
      /** 设置按钮 **/
      setButton(row){
        this.btnSearchParam = { parent: row.id };
        this.btn = { parent: row.id, type: 2 };
        this.drawerTitle = row.name + ' > 按钮配置';
        this.drawerVisible = true;
        this.$nextTick(()=>{
          this.$refs.btnTable.reset();
          this.$refs.btnTable.loadData();
        })
      },
      /** 编辑 **/
      handleEdit(row){
        this.btn = row;
      },
      /** 保存按钮回调 **/
      btnSave(){
        this.$refs.btnTable.loadData();
      },
      /** 按钮表单重置回调 **/
      btnReset(){
        const { parent, type } = this.btn;
        this.btn = {
          parent,type
        };
      },
      /** 删除 **/
      handleDelete(val){
        this.$ajax.requestCommonDelete(this.deleteUrl+'/'+val).then(()=>{
          this.$message.success('删除成功');
          this.$refs.btnTable.loadData();
        })
      },
    }
  }
</script>

<style lang="scss" scoped>

</style>
